
<!--<template>-->
<!--  <div>-->
<!--    <div class="gva-search-box">-->
<!--      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">-->
<!--      <el-form-item label="创建日期" prop="createdAtRange">-->
<!--      <template #label>-->
<!--        <span>-->
<!--          创建日期-->
<!--          <el-tooltip content="搜索范围是开始日期（包含）至结束日期（不包含）">-->
<!--            <el-icon><QuestionFilled /></el-icon>-->
<!--          </el-tooltip>-->
<!--        </span>-->
<!--      </template>-->

<!--      <el-date-picker-->
<!--            v-model="searchInfo.createdAtRange"-->
<!--            class="w-[380px]"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始时间"-->
<!--            end-placeholder="结束时间"-->
<!--          />-->
<!--       </el-form-item>-->
<!--      -->
<!--            <el-form-item label="设备型号" prop="equipmentModel">-->
<!--  <el-select v-model="searchInfo.equipmentModel" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.equipmentModel=undefined}">-->
<!--    <el-option v-for="(item,key) in equipment_modelOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--  </el-select>-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="版本号" prop="version">-->
<!--  <el-input v-model="searchInfo.version" placeholder="搜索条件" />-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="应用软件" prop="applicationSoftware">-->
<!--  <el-input v-model="searchInfo.applicationSoftware" placeholder="搜索条件" />-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="升级要求" prop="upgradeRequirements">-->
<!--  <el-select v-model="searchInfo.upgradeRequirements" clearable filterable placeholder="请选择" @clear="()=>{searchInfo.upgradeRequirements=undefined}">-->
<!--    <el-option v-for="(item,key) in upgrade_equirementsOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--  </el-select>-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="版本说明" prop="releaseNote">-->
<!--  <el-input v-model="searchInfo.releaseNote" placeholder="搜索条件" />-->
<!--</el-form-item>-->
<!--            -->
<!--            <el-form-item label="设备名称" prop="equipmentName">-->
<!--  <el-input v-model="searchInfo.equipmentName" placeholder="搜索条件" />-->
<!--</el-form-item>-->
<!--            -->

<!--        <template v-if="showAllQuery">-->
<!--          &lt;!&ndash; 将需要控制显示状态的查询条件添加到此范围内 &ndash;&gt;-->
<!--        </template>-->

<!--        <el-form-item>-->
<!--          <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>-->
<!--          <el-button icon="refresh" @click="onReset">重置</el-button>-->
<!--          <el-button link type="primary" icon="arrow-down" @click="showAllQuery=true" v-if="!showAllQuery">展开</el-button>-->
<!--          <el-button link type="primary" icon="arrow-up" @click="showAllQuery=false" v-else>收起</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </div>-->
<!--    <div class="gva-table-box">-->
<!--        <div class="gva-btn-list">-->
<!--            <el-button v-auth="btnAuth.add" type="primary" icon="plus" @click="openDialog()">新增</el-button>-->
<!--            <el-button v-auth="btnAuth.batchDelete" icon="delete" style="margin-left: 10px;" :disabled="!multipleSelection.length" @click="onDelete">删除</el-button>-->
<!--            -->
<!--        </div>-->
<!--        <el-table-->
<!--        ref="multipleTable"-->
<!--        style="width: 100%"-->
<!--        tooltip-effect="dark"-->
<!--        :data="tableData"-->
<!--        row-key="ID"-->
<!--        @selection-change="handleSelectionChange"-->
<!--        >-->
<!--        <el-table-column type="selection" width="55" />-->
<!--        -->
<!--        <el-table-column sortable align="left" label="日期" prop="CreatedAt"width="180">-->
<!--            <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>-->
<!--        </el-table-column>-->
<!--        -->
<!--            <el-table-column align="left" label="设备型号" prop="equipmentModel" width="120">-->
<!--    <template #default="scope">-->
<!--    {{ filterDict(scope.row.equipmentModel,equipment_modelOptions) }}-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="版本号" prop="version" width="120" />-->

<!--            <el-table-column align="left" label="应用软件" prop="applicationSoftware" width="120" />-->

<!--            <el-table-column align="left" label="系统控制" prop="systemControl" width="120" />-->

<!--            <el-table-column align="left" label="升级要求" prop="upgradeRequirements" width="120">-->
<!--    <template #default="scope">-->
<!--    {{ filterDict(scope.row.upgradeRequirements,upgrade_equirementsOptions) }}-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="版本说明" prop="releaseNote" width="120" />-->

<!--            <el-table-column label="版本包" prop="versionPackage" width="200">-->
<!--    <template #default="scope">-->
<!--      <el-image preview-teleported style="width: 100px; height: 100px" :src="getUrl(scope.row.versionPackage)" fit="cover"/>-->
<!--    </template>-->
<!--</el-table-column>-->
<!--            <el-table-column align="left" label="设备名称" prop="equipmentName" width="120" />-->

<!--        <el-table-column align="left" label="操作" fixed="right" :min-width="appStore.operateMinWith">-->
<!--            <template #default="scope">-->
<!--            <el-button v-auth="btnAuth.info" type="primary" link class="table-button" @click="getDetails(scope.row)"><el-icon style="margin-right: 5px"><InfoFilled /></el-icon>查看</el-button>-->
<!--            <el-button v-auth="btnAuth.edit" type="primary" link icon="edit" class="table-button" @click="updateAllVersionsFunc(scope.row)">编辑</el-button>-->
<!--            <el-button  v-auth="btnAuth.delete" type="primary" link icon="delete" @click="deleteRow(scope.row)">删除</el-button>-->
<!--            </template>-->
<!--        </el-table-column>-->
<!--        </el-table>-->
<!--        <div class="gva-pagination">-->
<!--            <el-pagination-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            :current-page="page"-->
<!--            :page-size="pageSize"-->
<!--            :page-sizes="[10, 30, 50, 100]"-->
<!--            :total="total"-->
<!--            @current-change="handleCurrentChange"-->
<!--            @size-change="handleSizeChange"-->
<!--            />-->
<!--        </div>-->
<!--    </div>-->
<!--    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="dialogFormVisible" :show-close="false" :before-close="closeDialog">-->
<!--       <template #header>-->
<!--              <div class="flex justify-between items-center">-->
<!--                <span class="text-lg">{{type==='create'?'新增':'编辑'}}</span>-->
<!--                <div>-->
<!--                  <el-button :loading="btnLoading" type="primary" @click="enterDialog">确 定</el-button>-->
<!--                  <el-button @click="closeDialog">取 消</el-button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->

<!--          <el-form :model="formData" label-position="top" ref="elFormRef" :rules="rule" label-width="80px">-->
<!--            <el-form-item label="设备型号:" prop="equipmentModel">-->
<!--    <el-select v-model="formData.equipmentModel" placeholder="请选择设备型号" style="width:100%" filterable :clearable="false">-->
<!--        <el-option v-for="(item,key) in equipment_modelOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--    </el-select>-->
<!--</el-form-item>-->
<!--            <el-form-item label="版本号:" prop="version">-->
<!--    <el-input v-model="formData.version" :clearable="false" placeholder="请输入版本号" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="应用软件:" prop="applicationSoftware">-->
<!--    <el-input v-model="formData.applicationSoftware" :clearable="false" placeholder="请输入应用软件" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="系统控制:" prop="systemControl">-->
<!--    <el-input v-model="formData.systemControl" :clearable="false" placeholder="请输入系统控制" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="升级要求:" prop="upgradeRequirements">-->
<!--    <el-select v-model="formData.upgradeRequirements" placeholder="请选择升级要求" style="width:100%" filterable :clearable="false">-->
<!--        <el-option v-for="(item,key) in upgrade_equirementsOptions" :key="key" :label="item.label" :value="item.value" />-->
<!--    </el-select>-->
<!--</el-form-item>-->
<!--            <el-form-item label="版本说明:" prop="releaseNote">-->
<!--    <el-input v-model="formData.releaseNote" :clearable="false" placeholder="请输入版本说明" />-->
<!--</el-form-item>-->
<!--            <el-form-item label="版本包:" prop="versionPackage">-->
<!--    <SelectImage-->
<!--     v-model="formData.versionPackage"-->
<!--     file-type="image"-->
<!--    />-->
<!--</el-form-item>-->
<!--            <el-form-item label="设备名称:" prop="equipmentName">-->
<!--    <el-input v-model="formData.equipmentName" :clearable="true" placeholder="请输入设备名称" />-->
<!--</el-form-item>-->
<!--          </el-form>-->
<!--    </el-drawer>-->

<!--    <el-drawer destroy-on-close :size="appStore.drawerSize" v-model="detailShow" :show-close="true" :before-close="closeDetailShow" title="查看">-->
<!--            <el-descriptions :column="1" border>-->
<!--                    <el-descriptions-item label="设备型号">-->
<!--    {{ detailFrom.equipmentModel }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="版本号">-->
<!--    {{ detailFrom.version }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="应用软件">-->
<!--    {{ detailFrom.applicationSoftware }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="系统控制">-->
<!--    {{ detailFrom.systemControl }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="升级要求">-->
<!--    {{ detailFrom.upgradeRequirements }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="版本说明">-->
<!--    {{ detailFrom.releaseNote }}-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="版本包">-->
<!--    <el-image style="width: 50px; height: 50px" :preview-src-list="returnArrImg(detailFrom.versionPackage)" :src="getUrl(detailFrom.versionPackage)" fit="cover" />-->
<!--</el-descriptions-item>-->
<!--                    <el-descriptions-item label="设备名称">-->
<!--    {{ detailFrom.equipmentName }}-->
<!--</el-descriptions-item>-->
<!--            </el-descriptions>-->
<!--        </el-drawer>-->

<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import {-->
<!--  createAllVersions,-->
<!--  deleteAllVersions,-->
<!--  deleteAllVersionsByIds,-->
<!--  updateAllVersions,-->
<!--  findAllVersions,-->
<!--  getAllVersionsList-->
<!--} from '@/api/equipment_management/allVersions'-->
<!--import { getUrl } from '@/utils/image'-->
<!--// 图片选择组件-->
<!--import SelectImage from '@/components/selectImage/selectImage.vue'-->

<!--// 全量引入格式化工具 请按需保留-->
<!--import { getDictFunc, formatDate, formatBoolean, filterDict ,filterDataSource, returnArrImg, onDownloadFile } from '@/utils/format'-->
<!--import { ElMessage, ElMessageBox } from 'element-plus'-->
<!--import { ref, reactive } from 'vue'-->
<!--// 引入按钮权限标识-->
<!--import { useBtnAuth } from '@/utils/btnAuth'-->
<!--import { useAppStore } from "@/pinia"-->




<!--defineOptions({-->
<!--    name: 'AllVersions'-->
<!--})-->
<!--// 按钮权限实例化-->
<!--    const btnAuth = useBtnAuth()-->

<!--// 提交按钮loading-->
<!--const btnLoading = ref(false)-->
<!--const appStore = useAppStore()-->

<!--// 控制更多查询条件显示/隐藏状态-->
<!--const showAllQuery = ref(false)-->

<!--// 自动化生成的字典（可能为空）以及字段-->
<!--const equipment_modelOptions = ref([])-->
<!--const upgrade_equirementsOptions = ref([])-->
<!--const formData = ref({-->
<!--            equipmentModel: '',-->
<!--            version: '',-->
<!--            applicationSoftware: '',-->
<!--            systemControl: '',-->
<!--            upgradeRequirements: '',-->
<!--            releaseNote: '',-->
<!--            versionPackage: "",-->
<!--            equipmentName: '',-->
<!--        })-->



<!--// 验证规则-->
<!--const rule = reactive({-->
<!--               equipmentModel : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               version : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               applicationSoftware : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               systemControl : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               upgradeRequirements : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               releaseNote : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--               versionPackage : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--              ],-->
<!--               equipmentName : [{-->
<!--                   required: true,-->
<!--                   message: '',-->
<!--                   trigger: ['input','blur'],-->
<!--               },-->
<!--               {-->
<!--                   whitespace: true,-->
<!--                   message: '不能只输入空格',-->
<!--                   trigger: ['input', 'blur'],-->
<!--              }-->
<!--              ],-->
<!--})-->

<!--const elFormRef = ref()-->
<!--const elSearchFormRef = ref()-->

<!--// =========== 表格控制部分 ===========-->
<!--const page = ref(1)-->
<!--const total = ref(0)-->
<!--const pageSize = ref(10)-->
<!--const tableData = ref([])-->
<!--const searchInfo = ref({})-->
<!--// 重置-->
<!--const onReset = () => {-->
<!--  searchInfo.value = {}-->
<!--  getTableData()-->
<!--}-->

<!--// 搜索-->
<!--const onSubmit = () => {-->
<!--  elSearchFormRef.value?.validate(async(valid) => {-->
<!--    if (!valid) return-->
<!--    page.value = 1-->
<!--    getTableData()-->
<!--  })-->
<!--}-->

<!--// 分页-->
<!--const handleSizeChange = (val) => {-->
<!--  pageSize.value = val-->
<!--  getTableData()-->
<!--}-->

<!--// 修改页面容量-->
<!--const handleCurrentChange = (val) => {-->
<!--  page.value = val-->
<!--  getTableData()-->
<!--}-->

<!--// 查询-->
<!--const getTableData = async() => {-->
<!--  const table = await getAllVersionsList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })-->
<!--  if (table.code === 0) {-->
<!--    tableData.value = table.data.list-->
<!--    total.value = table.data.total-->
<!--    page.value = table.data.page-->
<!--    pageSize.value = table.data.pageSize-->
<!--  }-->
<!--}-->

<!--getTableData()-->

<!--// ============== 表格控制部分结束 ===============-->

<!--// 获取需要的字典 可能为空 按需保留-->
<!--const setOptions = async () =>{-->
<!--    equipment_modelOptions.value = await getDictFunc('equipment_model')-->
<!--    upgrade_equirementsOptions.value = await getDictFunc('upgrade_equirements')-->
<!--}-->

<!--// 获取需要的字典 可能为空 按需保留-->
<!--setOptions()-->


<!--// 多选数据-->
<!--const multipleSelection = ref([])-->
<!--// 多选-->
<!--const handleSelectionChange = (val) => {-->
<!--    multipleSelection.value = val-->
<!--}-->

<!--// 删除行-->
<!--const deleteRow = (row) => {-->
<!--    ElMessageBox.confirm('确定要删除吗?', '提示', {-->
<!--        confirmButtonText: '确定',-->
<!--        cancelButtonText: '取消',-->
<!--        type: 'warning'-->
<!--    }).then(() => {-->
<!--            deleteAllVersionsFunc(row)-->
<!--        })-->
<!--    }-->

<!--// 多选删除-->
<!--const onDelete = async() => {-->
<!--  ElMessageBox.confirm('确定要删除吗?', '提示', {-->
<!--    confirmButtonText: '确定',-->
<!--    cancelButtonText: '取消',-->
<!--    type: 'warning'-->
<!--  }).then(async() => {-->
<!--      const IDs = []-->
<!--      if (multipleSelection.value.length === 0) {-->
<!--        ElMessage({-->
<!--          type: 'warning',-->
<!--          message: '请选择要删除的数据'-->
<!--        })-->
<!--        return-->
<!--      }-->
<!--      multipleSelection.value &&-->
<!--        multipleSelection.value.map(item => {-->
<!--          IDs.push(item.ID)-->
<!--        })-->
<!--      const res = await deleteAllVersionsByIds({ IDs })-->
<!--      if (res.code === 0) {-->
<!--        ElMessage({-->
<!--          type: 'success',-->
<!--          message: '删除成功'-->
<!--        })-->
<!--        if (tableData.value.length === IDs.length && page.value > 1) {-->
<!--          page.value&#45;&#45;-->
<!--        }-->
<!--        getTableData()-->
<!--      }-->
<!--      })-->
<!--    }-->

<!--// 行为控制标记（弹窗内部需要增还是改）-->
<!--const type = ref('')-->

<!--// 更新行-->
<!--const updateAllVersionsFunc = async(row) => {-->
<!--    const res = await findAllVersions({ ID: row.ID })-->
<!--    type.value = 'update'-->
<!--    if (res.code === 0) {-->
<!--        formData.value = res.data-->
<!--        dialogFormVisible.value = true-->
<!--    }-->
<!--}-->


<!--// 删除行-->
<!--const deleteAllVersionsFunc = async (row) => {-->
<!--    const res = await deleteAllVersions({ ID: row.ID })-->
<!--    if (res.code === 0) {-->
<!--        ElMessage({-->
<!--                type: 'success',-->
<!--                message: '删除成功'-->
<!--            })-->
<!--            if (tableData.value.length === 1 && page.value > 1) {-->
<!--            page.value&#45;&#45;-->
<!--        }-->
<!--        getTableData()-->
<!--    }-->
<!--}-->

<!--// 弹窗控制标记-->
<!--const dialogFormVisible = ref(false)-->

<!--// 打开弹窗-->
<!--const openDialog = () => {-->
<!--    type.value = 'create'-->
<!--    dialogFormVisible.value = true-->
<!--}-->

<!--// 关闭弹窗-->
<!--const closeDialog = () => {-->
<!--    dialogFormVisible.value = false-->
<!--    formData.value = {-->
<!--        equipmentModel: '',-->
<!--        version: '',-->
<!--        applicationSoftware: '',-->
<!--        systemControl: '',-->
<!--        upgradeRequirements: '',-->
<!--        releaseNote: '',-->
<!--        versionPackage: "",-->
<!--        equipmentName: '',-->
<!--        }-->
<!--}-->
<!--// 弹窗确定-->
<!--const enterDialog = async () => {-->
<!--     btnLoading.value = true-->
<!--     elFormRef.value?.validate( async (valid) => {-->
<!--             if (!valid) return btnLoading.value = false-->
<!--              let res-->
<!--              switch (type.value) {-->
<!--                case 'create':-->
<!--                  res = await createAllVersions(formData.value)-->
<!--                  break-->
<!--                case 'update':-->
<!--                  res = await updateAllVersions(formData.value)-->
<!--                  break-->
<!--                default:-->
<!--                  res = await createAllVersions(formData.value)-->
<!--                  break-->
<!--              }-->
<!--              btnLoading.value = false-->
<!--              if (res.code === 0) {-->
<!--                ElMessage({-->
<!--                  type: 'success',-->
<!--                  message: '创建/更改成功'-->
<!--                })-->
<!--                closeDialog()-->
<!--                getTableData()-->
<!--              }-->
<!--      })-->
<!--}-->

<!--const detailFrom = ref({})-->

<!--// 查看详情控制标记-->
<!--const detailShow = ref(false)-->


<!--// 打开详情弹窗-->
<!--const openDetailShow = () => {-->
<!--  detailShow.value = true-->
<!--}-->


<!--// 打开详情-->
<!--const getDetails = async (row) => {-->
<!--  // 打开弹窗-->
<!--  const res = await findAllVersions({ ID: row.ID })-->
<!--  if (res.code === 0) {-->
<!--    detailFrom.value = res.data-->
<!--    openDetailShow()-->
<!--  }-->
<!--}-->


<!--// 关闭详情弹窗-->
<!--const closeDetailShow = () => {-->
<!--  detailShow.value = false-->
<!--  detailFrom.value = {}-->
<!--}-->


<!--</script>-->

<!--<style>-->

<!--</style>-->


<template>
  <div class="layout-container">
    <!-- 左侧侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">设备型号</div>
      <el-tree
        :data="sidebarData"
        :props="sidebarProps"
        @node-click="handleSidebarClick"
        default-expand-all
        accordion
      />
    </div>

    <!-- 右侧主内容 -->
    <div class="main-content">
      <!-- 筛选区 + 操作按钮 -->
      <div class="gva-search-box">
        <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter="onSubmit">
          <!-- 设备型号筛选 -->
          <el-form-item label="设备型号" prop="equipmentModel">
            <el-select v-model="searchInfo.equipmentModel" clearable filterable placeholder="请选择">
              <el-option
                v-for="(item, key) in equipment_modelOptions"
                :key="key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 版本号搜索 -->
          <el-form-item label="版本号" prop="version">
            <el-input v-model="searchInfo.version" placeholder="搜索条件" />
          </el-form-item>

          <!-- 应用软件搜索 -->
          <el-form-item label="应用软件" prop="applicationSoftware">
            <el-input v-model="searchInfo.applicationSoftware" placeholder="搜索条件" />
          </el-form-item>

          <!-- 升级要求筛选 -->
          <el-form-item label="升级要求" prop="upgradeRequirements">
            <el-select v-model="searchInfo.upgradeRequirements" clearable filterable placeholder="请选择">
              <el-option
                v-for="(item, key) in upgrade_equirementsOptions"
                :key="key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 操作按钮：新增/修改/删除 -->
          <el-form-item>
            <el-button type="primary" icon="Plus" @click="openDialog('create')">新增</el-button>
            <el-button
              type="warning"
              icon="Edit"
              style="margin-left: 10px;"
              :disabled="!singleSelection"
              @click="openDialog('update')"
            >修改</el-button>
            <el-button
              type="danger"
              icon="Delete"
              style="margin-left: 10px;"
              :disabled="!multipleSelection.length"
              @click="batchDelete"
            >删除</el-button>
          </el-form-item>

          <!-- 查询/重置按钮 -->
          <el-form-item>
            <el-button type="primary" icon="Search" @click="onSubmit">查询</el-button>
            <el-button icon="Refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格区 -->
      <div class="gva-table-box">
        <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          :data="tableData"
          row-key="ID"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column sortable align="left" label="日期" prop="CreatedAt" width="180">
            <template #default="scope">{{ formatDate(scope.row.CreatedAt) }}</template>
          </el-table-column>
          <el-table-column align="left" label="设备型号" prop="equipmentModel" width="120">
            <template #default="scope">
              {{ filterDict(scope.row.equipmentModel, equipment_modelOptions) }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="版本号" prop="version" width="120" />
          <el-table-column align="left" label="应用软件" prop="applicationSoftware" width="120" />
          <el-table-column align="left" label="系统控制" prop="systemControl" width="120" />
          <el-table-column align="left" label="升级要求" prop="upgradeRequirements" width="120">
            <template #default="scope">
              {{ filterDict(scope.row.upgradeRequirements, upgrade_equirementsOptions) }}
            </template>
          </el-table-column>
          <el-table-column align="left" label="版本说明" prop="releaseNote" width="120" />
          <el-table-column label="版本包" prop="versionPackage" width="200">
            <template #default="scope">
              <el-image
                preview-teleported
                style="width: 100px; height: 100px"
                :src="getUrl(scope.row.versionPackage)"
                fit="cover"
              />
            </template>
          </el-table-column>
          <el-table-column align="left" label="设备名称" prop="equipmentName" width="120" />
          <el-table-column align="left" label="操作" :min-width="120">
            <template #default="scope">
              <el-button
                v-auth="btnAuth.edit"
                type="primary"
                link
                icon="Edit"
                @click="openDialog('update', scope.row)"
              >编辑</el-button>
              <el-button
                v-auth="btnAuth.delete"
                type="primary"
                link
                icon="Delete"
                @click="deleteRow(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="gva-pagination">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :current-page="page"
            :page-size="pageSize"
            :page-sizes="[10, 30, 50, 100]"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
    </div>

    <!-- 新增/编辑弹窗 -->
    <el-drawer
      destroy-on-close
      :size="appStore.drawerSize"
      v-model="dialogVisible"
      :show-close="false"
      :before-close="closeDialog"
    >
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg">{{ dialogTitle }}</span>
          <div>
            <el-button
              :loading="btnLoading"
              type="primary"
              @click="submitForm"
            >确 定</el-button>
            <el-button @click="closeDialog">取 消</el-button>
          </div>
        </div>
      </template>
      <el-form
        :model="formData"
        label-position="top"
        ref="formRef"
        :rules="formRules"
        label-width="80px"
      >
        <el-form-item label="设备型号:" prop="equipmentModel">
          <el-select
            v-model="formData.equipmentModel"
            placeholder="请选择设备型号"
            style="width:100%"
            filterable
            :clearable="false"
          >
            <el-option
              v-for="(item, key) in equipment_modelOptions"
              :key="key"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="版本号:" prop="version">
          <el-input
            v-model="formData.version"
            :clearable="false"
            placeholder="请输入版本号"
          />
        </el-form-item>
        <el-form-item label="应用软件:" prop="applicationSoftware">
          <el-input
            v-model="formData.applicationSoftware"
            :clearable="false"
            placeholder="请输入应用软件"
          />
        </el-form-item>
        <el-form-item label="系统控制:" prop="systemControl">
          <el-input
            v-model="formData.systemControl"
            :clearable="false"
            placeholder="请输入系统控制"
          />
        </el-form-item>
        <el-form-item label="升级要求:" prop="upgradeRequirements">
          <el-select
            v-model="formData.upgradeRequirements"
            placeholder="请选择升级要求"
            style="width:100%"
            filterable
            :clearable="false"
          >
            <el-option
              v-for="(item, key) in upgrade_equirementsOptions"
              :key="key"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="版本说明:" prop="releaseNote">
          <el-input
            v-model="formData.releaseNote"
            :clearable="false"
            placeholder="请输入版本说明"
          />
        </el-form-item>
        <el-form-item label="版本包:" prop="versionPackage">
          <SelectImage
            v-model="formData.versionPackage"
            file-type="image"
          />
        </el-form-item>
        <el-form-item label="设备名称:" prop="equipmentName">
          <el-input
            v-model="formData.equipmentName"
            :clearable="true"
            placeholder="请输入设备名称"
          />
        </el-form-item>
      </el-form>
    </el-drawer>

    <!-- 详情弹窗 -->
    <el-drawer
      destroy-on-close
      :size="appStore.drawerSize"
      v-model="detailVisible"
      :show-close="true"
      :before-close="closeDetail"
      title="查看详情"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="设备型号">
          {{ detailData.equipmentModel }}
        </el-descriptions-item>
        <el-descriptions-item label="版本号">
          {{ detailData.version }}
        </el-descriptions-item>
        <el-descriptions-item label="应用软件">
          {{ detailData.applicationSoftware }}
        </el-descriptions-item>
        <el-descriptions-item label="系统控制">
          {{ detailData.systemControl }}
        </el-descriptions-item>
        <el-descriptions-item label="升级要求">
          {{ detailData.upgradeRequirements }}
        </el-descriptions-item>
        <el-descriptions-item label="版本说明">
          {{ detailData.releaseNote }}
        </el-descriptions-item>
        <el-descriptions-item label="版本包">
          <el-image
            style="width: 50px; height: 50px"
            :preview-src-list="returnArrImg(detailData.versionPackage)"
            :src="getUrl(detailData.versionPackage)"
            fit="cover"
          />
        </el-descriptions-item>
        <el-descriptions-item label="设备名称">
          {{ detailData.equipmentName }}
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script setup>
  import {
    createAllVersions,
    deleteAllVersions,
    deleteAllVersionsByIds,
    updateAllVersions,
    findAllVersions,
    getAllVersionsList
  } from '@/api/equipment_management/allVersions'
  import { getUrl } from '@/utils/image'
  import SelectImage from '@/components/selectImage/selectImage.vue'
  import { getDictFunc, formatDate, filterDict, returnArrImg } from '@/utils/format'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useBtnAuth } from '@/utils/btnAuth'
  import { useAppStore } from "@/pinia"

  // 按钮权限
  const btnAuth = useBtnAuth()
  const appStore = useAppStore()

  // 侧边栏数据
  const sidebarData = ref([
    {
      label: '光刻机',
      children: [
        { label: 'SZ-GK01' },
        { label: 'SZ-GK02' }
      ]
    },
    {
      label: '刻蚀机',
      children: [
        { label: 'SZ-KS01' },
        { label: 'SZ-KS02' },
        { label: 'SZ-KS03' }
      ]
    },
    {
      label: '离子注入机',
      children: [
        { label: 'SZ-ZR01' },
        { label: 'SZ-ZR02' }
      ]
    },
    {
      label: '晶圆缺陷检测仪',
      children: [
        { label: 'SZ-JY01' },
        { label: 'SZ-JY02' }
      ]
    }
  ])
  const sidebarProps = { label: 'label', children: 'children' }

  // 表格数据
  const page = ref(1)
  const total = ref(0)
  const pageSize = ref(10)
  const tableData = ref([])
  const searchInfo = ref({})

  // 字典数据
  const equipment_modelOptions = ref([])
  const upgrade_equirementsOptions = ref([])

  // 表单 & 弹窗
  const formData = ref({
    equipmentModel: '',
    version: '',
    applicationSoftware: '',
    systemControl: '',
    upgradeRequirements: '',
    releaseNote: '',
    versionPackage: "",
    equipmentName: ''
  })
  const formRules = reactive({
    equipmentModel: [
      { required: true, message: '请选择设备型号', trigger: 'change' },
      { whitespace: true, message: '不能只输入空格', trigger: ['change', 'blur'] }
    ],
    version: [
      { required: true, message: '请输入版本号', trigger: 'blur' },
      { whitespace: true, message: '不能只输入空格', trigger: ['blur', 'change'] }
    ],
    applicationSoftware: [
      { required: true, message: '请输入应用软件', trigger: 'blur' },
      { whitespace: true, message: '不能只输入空格', trigger: ['blur', 'change'] }
    ],
    systemControl: [
      { required: true, message: '请输入系统控制', trigger: 'blur' },
      { whitespace: true, message: '不能只输入空格', trigger: ['blur', 'change'] }
    ],
    upgradeRequirements: [
      { required: true, message: '请选择升级要求', trigger: 'change' },
      { whitespace: true, message: '不能只输入空格', trigger: ['change', 'blur'] }
    ],
    releaseNote: [
      { required: true, message: '请输入版本说明', trigger: 'blur' },
      { whitespace: true, message: '不能只输入空格', trigger: ['blur', 'change'] }
    ],
    versionPackage: [
      { required: true, message: '请上传版本包', trigger: 'change' }
    ],
    equipmentName: [
      { required: true, message: '请输入设备名称', trigger: 'blur' },
      { whitespace: true, message: '不能只输入空格', trigger: ['blur', 'change'] }
    ]
  })
  const formRef = ref()
  const dialogVisible = ref(false)
  const dialogTitle = computed(() => (formData.value.ID ? '编辑' : '新增'))
  const btnLoading = ref(false)

  // 多选 & 单选
  const multipleSelection = ref([])
  const singleSelection = computed(() => multipleSelection.value.length === 1 ? multipleSelection.value[0] : null)

  // 详情弹窗
  const detailData = ref({})
  const detailVisible = ref(false)

  // 初始化
  onMounted(async () => {
    try {
      await Promise.all([
        setOptions(),
        getTableData()
      ])
    } catch (error) {
      console.error('初始化失败:', error)
      ElMessage.error('初始化失败，请刷新页面')
    }
  })

  // 获取字典数据
  const setOptions = async () => {
    try {
      const [equipmentModel, upgradeRequirements] = await Promise.all([
        getDictFunc('equipment_model'),
        getDictFunc('upgrade_equirements')
      ])
      equipment_modelOptions.value = equipmentModel
      upgrade_equirementsOptions.value = upgradeRequirements
    } catch (error) {
      console.error('获取字典数据失败:', error)
      ElMessage.error('获取字典数据失败，请重试')
    }
  }

  // 获取表格数据
  const getTableData = async () => {
    try {
      const res = await getAllVersionsList({
        page: page.value,
        pageSize: pageSize.value,
        ...searchInfo.value
      })

      if (res.code === 0) {
        tableData.value = res.data.list || []
        total.value = res.data.total || 0
        page.value = res.data.page || 1
        pageSize.value = res.data.pageSize || 10
      } else {
        ElMessage.error(res.message || '获取数据失败')
      }
    } catch (error) {
      console.error('获取表格数据失败:', error)
      ElMessage.error('获取表格数据失败，请重试')
    }
  }

  // 侧边栏点击事件
  const handleSidebarClick = (data) => {
    searchInfo.value.equipmentModel = data.label
    page.value = 1
    getTableData()
  }

  // 搜索
  const onSubmit = () => {
    page.value = 1
    getTableData()
  }

  // 重置搜索条件
  const onReset = () => {
    searchInfo.value = {}
    page.value = 1
    getTableData()
  }

  // 分页相关
  const handleSizeChange = (val) => {
    pageSize.value = val
    getTableData()
  }

  const handleCurrentChange = (val) => {
    page.value = val
    getTableData()
  }

  // 多选变更
  const handleSelectionChange = (val) => {
    multipleSelection.value = val
  }

  // 打开新增/编辑弹窗
  const openDialog = async (type, row = null) => {
    formRef.value?.resetFields()

    if (type === 'update' && row) {
      try {
        const res = await findAllVersions({ ID: row.ID })
        if (res.code === 0) {
          formData.value = { ...res.data }
          dialogVisible.value = true
        } else {
          ElMessage.error(res.message || '获取数据失败')
        }
      } catch (error) {
        console.error('获取编辑数据失败:', error)
        ElMessage.error('获取编辑数据失败，请重试')
      }
    } else {
      // 新增
      formData.value = {
        equipmentModel: '',
        version: '',
        applicationSoftware: '',
        systemControl: '',
        upgradeRequirements: '',
        releaseNote: '',
        versionPackage: '',
        equipmentName: ''
      }
      dialogVisible.value = true
    }
  }

  // 关闭弹窗
  const closeDialog = () => {
    dialogVisible.value = false
    formRef.value?.resetFields()
  }

  // 提交表单
  const submitForm = async () => {
    formRef.value?.validate(async (valid) => {
      if (!valid) return

      btnLoading.value = true
      try {
        let res

        if (formData.value.ID) {
          // 更新
          res = await updateAllVersions(formData.value)
        } else {
          // 新增
          res = await createAllVersions(formData.value)
        }

        if (res.code === 0) {
          ElMessage.success(formData.value.ID ? '更新成功' : '创建成功')
          dialogVisible.value = false
          getTableData()
        } else {
          ElMessage.error(res.message || (formData.value.ID ? '更新失败' : '创建失败'))
        }
      } catch (error) {
        console.error(formData.value.ID ? '更新失败' : '创建失败', error)
        ElMessage.error(formData.value.ID ? '更新失败，请重试' : '创建失败，请重试')
      } finally {
        btnLoading.value = false
      }
    })
  }

  // 删除单行
  const deleteRow = (row) => {
    ElMessageBox.confirm(
      `确定要删除 ${row.version} 版本信息吗?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(async () => {
      try {
        const res = await deleteAllVersions({ ID: row.ID })

        if (res.code === 0) {
          ElMessage.success('删除成功')

          // 如果删除后当前页没有数据了，跳转到上一页
          if (tableData.value.length === 1 && page.value > 1) {
            page.value--
          }

          getTableData()
        } else {
          ElMessage.error(res.message || '删除失败')
        }
      } catch (error) {
        console.error('删除失败:', error)
        ElMessage.error('删除失败，请重试')
      }
    })
  }

  // 批量删除
  const batchDelete = () => {
    if (multipleSelection.value.length === 0) {
      ElMessage.warning('请选择要删除的数据')
      return
    }

    ElMessageBox.confirm(
      `确定要删除选中的 ${multipleSelection.value.length} 条数据吗?`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    ).then(async () => {
      try {
        const IDs = multipleSelection.value.map(item => item.ID)
        const res = await deleteAllVersionsByIds({ IDs })

        if (res.code === 0) {
          ElMessage.success('删除成功')

          // 如果删除后当前页没有数据了，跳转到上一页
          const remainingCount = tableData.value.length - IDs.length
          if (remainingCount <= 0 && page.value > 1) {
            page.value--
          }

          getTableData()
          multipleSelection.value = []
        } else {
          ElMessage.error(res.message || '删除失败')
        }
      } catch (error) {
        console.error('批量删除失败:', error)
        ElMessage.error('批量删除失败，请重试')
      }
    })
  }

  // 处理下拉框清空事件
  const handleSelectClear = (field) => {
    searchInfo.value[field] = undefined
  }

  // 关闭详情弹窗
  const closeDetail = () => {
    detailVisible.value = false
  }
</script>

<style scoped>
  .layout-container {
    display: flex;
    height: 100%;
  }

  /* 侧边栏样式优化 */
  .sidebar {
    width: 220px;
    background-color: #fafafa;
    border-right: 1px solid #ebeef5;
    padding: 16px;
    overflow-y: auto;
  }

  .sidebar-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    padding-left: 8px;
  }

  /* 树形组件整体 */
  .el-tree {
    --el-tree-node-text-color: #666;
    --el-tree-node-hover-bg-color: #f0f9ff;
    --el-tree-node-selected-bg-color: #e6f7ff;
  }

  /* 节点间距 */
  .el-tree-node {
    margin: 4px 0;
  }

  /* 节点文字 */
  .el-tree-node__content {
    padding: 8px 0 8px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
  }

  /* 展开/折叠图标颜色 */
  .el-icon-caret-right {
    color: #999;
    margin-right: 6px;
  }

  /* 鼠标悬浮效果 */
  .el-tree-node__content:hover {
    background-color: #f0f9ff;
    transform: translateX(2px);
  }

  /* 选中态加强 */
  .el-tree-node.is-current > .el-tree-node__content {
    color: #409eff;
    font-weight: 500;
    box-shadow: 0 0 4px rgba(64, 158, 255, 0.2);
  }

  /* 叶子节点样式 */
  .el-tree-node.is-leaf > .el-tree-node__content {
    font-style: italic;
    color: #888;
  }

  /* 主内容区样式 */
  .main-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
  }

  .gva-search-box {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }

  .gva-table-box {
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  }

  .gva-pagination {
    padding: 16px;
    text-align: right;
  }
</style>